@import "../base/deploy";
//外填充
.f-m { margin: 15px; }
.f-m-sm { margin: 10px; }
.f-m-md { margin: 20px; }
.f-m-lg { margin: 30px; }
.f-m-xl { margin: 40px; }
.f-m-xxl { margin: 50px; } 
.f-m-xs { margin: 5px; }
.f-m-xxs { margin: 2px; }
.f-m-n { margin:0px !important; }

.f-m-l { margin-left: 15px; }
.f-m-l-sm { margin-left: 10px; }
.f-m-l-md { margin-left: 20px; }
.f-m-l-lg { margin-left: 30px; }
.f-m-l-xl { margin-left: 40px; }
.f-m-l-xxl { margin-left: 50px; }
.f-m-l-xs { margin-left: 5px; }
.f-m-l-xxs { margin-left: 2px; }
.f-m-l-n { margin-left:0px !important; }

.f-m-r { margin-right: 15px; }
.f-m-r-sm { margin-right: 10px; }
.f-m-r-md { margin-right: 20px; }
.f-m-r-lg { margin-right: 30px; }
.f-m-r-xl { margin-right: 40px; }
.f-m-r-xxl { margin-right: 50px; }
.f-m-r-xs { margin-right: 5px; }
.f-m-r-xxs { margin-right: 2px; }
.f-m-r-n { margin-right:0px !important; }



.f-m-t { margin-top: 15px; }
.f-m-t-sm { margin-top: 10px; }
.f-m-t-md { margin-top: 20px; }
.f-m-t-lg { margin-top: 30px; }
.f-m-t-xl { margin-top: 40px; }
.f-m-t-xxl { margin-top: 50px; }
.f-m-t-xs { margin-top: 5px; }
.f-m-t-xxs { margin-top: 2px; }
.f-m-t-xxss { margin-top: 1px; }
.f-m-t-1 { margin-top: -1px; }
.f-m-t-n { margin-top:0px !important; }

.f-m-b { margin-bottom: 15px; }
.f-m-b-sm { margin-bottom: 10px; }
.f-m-b-md { margin-bottom: 20px; }
.f-m-b-lg { margin-bottom: 30px; }
.f-m-b-xl { margin-bottom: 40px; }
.f-m-b-xxl { margin-bottom: 50px; }
.f-m-b-xs { margin-bottom: 5px; }
.f-m-b-xxs { margin-bottom: 2px; }
.f-m-b-n { margin-bottom:0px !important; }

//内填充
.f-p { padding: 15px; }
.f-p-sm { padding: 10px; }
.f-p-md { padding: 20px; }
.f-p-lg { padding: 30px; }
.f-p-xl { padding: 40px; }
.f-p-xxl { padding: 50px; }
.f-p-xs { padding: 5px; }
.f-p-xxs { padding: 2px; }
.f-p-n { padding:0px !important; }

.f-p-l { padding-left: 15px; }
.f-p-l-sm { padding-left: 10px; }
.f-p-l-md { padding-left: 20px; }
.f-p-l-lg { padding-left: 30px; }
.f-p-l-xl { padding-left: 40px; }
.f-p-l-xxl { padding-left: 50px; }
.f-p-l-xs { padding-left: 5px; }
.f-p-l-xxs { padding-left: 2px; }
.f-p-l-n { padding-left:0px !important; }

.f-p-r { padding-right: 15px; }
.f-p-r-sm { padding-right: 10px; }
.f-p-r-md { padding-right: 20px; }
.f-p-r-lg { padding-right: 30px; }
.f-p-r-xl { padding-right: 40px; }
.f-p-r-xxl { padding-right: 50px; }
.f-p-r-xs { padding-right: 5px; }
.f-p-r-xxs { padding-right: 2px; }
.f-p-r-n { padding-right:0px !important;}

.f-p-t { padding-top: 15px; }
.f-p-t-sm { padding-top: 10px; }
.f-p-t-md { padding-top: 20px; }
.f-p-t-lg { padding-top: 30px; }
.f-p-t-xl { padding-top: 40px; }
.f-p-t-xxl { padding-top: 50px; }
.f-p-t-xs { padding-top: 5px; }
.f-p-t-xxs { padding-top: 2px; }
.f-p-t-n { padding-top:0px !important;}

.f-p-b { padding-bottom: 15px; }
.f-p-b-sm { padding-bottom: 10px; }
.f-p-b-md { padding-bottom: 20px; }
.f-p-b-lg { padding-bottom: 30px; }
.f-p-b-xl { padding-bottom: 40px; }
.f-p-b-xxl { padding-bottom: 50px; }
.f-p-b-xs { padding-bottom: 5px; }
.f-p-b-xxs { padding-bottom: 2px; }
.f-p-b-n { padding-bottom:0px !important;}



//左右填充分配
.f-ng-p, .u-btn.f-ng-p { padding-left: 15px!important; padding-right: 15px!important; }
.f-ng-p-sm, .u-btn.f-ng-p-sm { padding-left: 10px!important; padding-right: 10px!important; }
.f-ng-p-md, .u-btn.f-ng-p-md { padding-left: 20px!important; padding-right: 20px!important; }
.f-ng-p-lg, .u-btn.f-ng-p-lg { padding-left: 30px!important; padding-right: 30px!important; }
.f-ng-p-xl, .u-btn.f-ng-p-xl { padding-left: 40px!important; padding-right: 40px!important; }
.f-ng-p-xxl, .u-btn.f-ng-p-xxl { padding-left: 50px!important; padding-right: 50px!important; }
.f-ng-p-xs, .u-btn.f-ng-p-xs { padding-left: 5px!important; padding-right: 5px!important; }
.f-ng-p-xxs, .u-btn.f-ng-p-xxs { padding-left: 2px!important; padding-right: 2px!important; }
.f-ng-p-n, .u-btn.f-ng-p-n { padding-left:0px !important; padding-right:0px !important; }

.f-ng-m { margin-left: 15px!important; margin-right: 15px!important; }
.f-ng-m-sm { margin-left: 10px!important!important; margin-right: 10px!important; }
.f-ng-m-md { margin-left: 20px; margin-right: 20px!important; }
.f-ng-m-lg { margin-left: 30px!important; margin-right: 30px!important; }
.f-ng-m-xl { margin-left: 40px!important; margin-right: 40px!important; }
.f-ng-m-xxl { margin-left: 50px!important; margin-right: 50px!important; }
.f-ng-m-xs { margin-left: 5px!important; margin-right: 5px!important; }
.f-ng-m-xxs { margin-left: 2px!important; margin-right: 2px!important; }
.f-ng-m-n { margin-left:0px !important; margin-right:0px !important; }


.f-oh { overflow: hidden!important; }

//H5边距优化  此项仅在支持H5浏览器使用
.border-box {
-moz-box-sizing: border-box;  
-webkit-box-sizing: border-box; 
-o-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box; 
//.forieboxsizing;
}

//细线字体
.f-text-thin{
	font-weight: 100;
}

//表单下 必填标识符（这项应该放置在表单部分）
.u-formitem label span.f-color-danger { line-height: 17px }

//方位
.f-left { float: left!important; }
.f-right { float: right!important;}
.f-center { margin: 0 auto!important; float: none; display: block;}

.f-info-l { text-align: left }
.f-info-r { text-align: right }
.f-info-t { vertical-align: top }
.f-info-b { vertical-align: text-bottom }
.f-info-c { text-align: center!important; }
.f-info-m { vertical-align: middle }

//排列方式
.f-inline { display: inline!important; }

//定位
.f-relative { position: relative }
.f-fixed { position: fixed }
.f-absolute { position: absolute }


.f-pre { overflow: hidden; text-align: left; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; }
.f-toe { overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; }

//隐藏
.f-hidden, .hidden { display: none!important; }
.f-show, .show { display: block!important;}
//移除
.f-remove, .remove{position: fixed; top:-99999px; right:-99999px; z-index: -1}

//文字超出则隐藏
.f-textoverflow, .f-tof{
	display: block; 
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.f-textoverflowclose, .f-tofclose{
	display: block; 
	overflow:visible;
	text-overflow:inherit;
	white-space:normal;
}

//指针
.f-mcp { cursor: pointer; }
.f-mcd { cursor: default; }
.f-mch { cursor: help; }
.f-mcc { cursor:crosshair;}
.f-mct { cursor: text;}
.f-mcw { cursor: wait;}
.f-mcm { cursor: move; }
.f-mcs { cursor: s-resize;}
.f-mcw { cursor: w-resize;}
.f-mcse { cursor: se-resize;}
.f-mcne { cursor: ne-resize;}

//圆角
.f-r { border-radius: 3px; }
.f-r-md { border-radius: 5px;}
.f-r-lg { border-radius: 8px;}
.f-r-o { border-radius: 50%;}
.f-r-i { border-radius: 3px !important; }
.f-r-md-i { border-radius: 5px !important;}
.f-r-lg-i { border-radius: 8px !important;}
.f-r-o-i { border-radius: 50% !important;}

.f-t-l-n { border-top-left-radius: 0 }
.f-t-r-n { border-top-right-radius: 0 }
.f-b-l-n { border-bottom-left-radius: 0 }
.f-b-r-n { border-bottom-right-radius: 0 }

//边框
.f-b { border: #DDDDDD 1px solid }
.f-b-l { border-left: #DDDDDD 1px solid }
.f-b-r { border-right: #DDDDDD 1px solid }
.f-b-t { border-top: #DDDDDD 1px solid }
.f-b-b { border-bottom: #DDDDDD 1px solid }

.f-b-n { border: none !important }
.f-b-n-t { border-top: none !important }
.f-b-n-r { border-right: none !important }
.f-b-n-b { border-bottom: none !important }
.f-b-n-l { border-left: none !important }

.f-b-n { border: none !important }
.f-b-t-n { border-top: none !important }
.f-b-r-n { border-right: none !important }
.f-b-b-n { border-bottom: none !important }
.f-b-l-n { border-left: none !important }
//投影
.f-shadow{
	box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

//溢出限制
.f-clear,
.u-group,
.u-formitem,
.m-table-form.inline .u-formitem ,
.row,
.m-panel,
.panel-head,
.panel-foot,
.panel-h-l,
.panel-h-r,
.m-toolbar,
.m-menu,
.m-menu li,
.m-combo,
.g-box1000,
.m-pagebar,
.container-1000,
.g-box1200,
.u-btn-eject,
.u-inputitem,
.container-1200,
.dateTd,
.dateDD,
.panel-massage-box
{ 
	zoom: 1;
	&:after{
		content: "\20";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
}

//禁止选中样式
.f-noselected, .u-btn, .iconfont, .m-list.icon li{
	moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select:none;
	-khtml-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
	
}
//loading界面
.quarters-loader:not(:required) {
	-moz-animation: three-quarters-loader 700ms infinite linear;
	-webkit-animation: three-quarters-loader 700ms infinite linear;
	animation: three-quarters-loader 700ms infinite linear;
	border: 3px solid #33EEE3;
	border-right-color: rgba(0,0,0,0);
	border-radius: 50%;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	overflow: visible;
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background:none;
}
.quarters-loader{
	&:after{
		content: "\20";
		width: 6px;
		height: 6px;
		font-size: 1px;
		border-radius: 50%;
		display: block;
		position: absolute;
		top: 5px;
		right:-4px;
		background: #fff;
		text-indent:0;
		overflow: hidden;
		box-shadow: 0 0 9px rgb(178, 252, 255);
	}
}
.quarters-loader {
	width: 84px;
	height: 84px;
	background: url("@{imgurl}login.gif") center 50% no-repeat;
	display: block;
	margin-bottom: 10px;
}

//loading界面
.loading_bg .loading_bg_center {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	text-align: center;
	width: 90px;
	height: 90px;
	margin-top: -45px;
	margin-left: -45px;
	padding-top: 25px;
}
.loading_bg {
	background: rgba(0,0,0,.5);
	background: url("@{imgurl}bg-bg.png");
	display: table-cell;
	text-align: center;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
}
@-moz-keyframes three-quarters-loader {
 0% {
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes three-quarters-loader {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes three-quarters-loader {
 0% {
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

